<template>
	<view class="workorderlist-main">
		<view class="items-top">
			<view class="cell_item">
				<lauwen-select :options="options" :defaultIndex="1" :height="45" :fontSize="'22rpx'"
					@getValue="getValue"></lauwen-select>
			</view>
		</view>
		<mescroll-list :fixed="false" :down="mescrollDown" :up="mescrollUp" ref="mescrollRef" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<!-- <scroll-view scroll-y
					style="height: 75vh;"
					:refresher-enabled="true"
					:scroll-top="scrollTop"
					 :refresher-triggered="refresherTriggered"
					 @refresherpulling="refresherrefresh"
					 @refresherrefresh ="refresherrefresh"
					> -->
			<view class="workorderlist">
				<!-- 列表项 -->
				<view class="" style="display: flex;justify-content: center;align-items: center;height: 100vh;"
					v-if="loading==true">
					<u-loading mode="flower" show size="100rpx"></u-loading>
				</view>
				<view class="items" v-for="(item,index) in orderList_ " v-else-if="order_length!=0">
					<order-card :orderItem='item' @gotoDetail="gotoDetail" @taketask='taketask'></order-card>
				</view>
				<view class="" style="width: 750rpx;display: flex;justify-content: center;" v-else>
					<image class="empty-icon" :src="icon" mode="widthFix" />
				</view>
			</view>
			<!-- </scroll-view> -->
		</mescroll-list>
	</view>
</template>

<script>
	import mescrollList from '@/components/mescroll-uni/mescroll-list.vue'
	import mescrollMixins from '@/components/mescroll-uni/mescroll-mixins.js'
	import orderCard from '@/components/orderCard/orderCard.vue'
	import lauwenSelect from "@/components/lauwen-select/lauwenSelect.vue"
	import {
		getWordOrder,
		sceneList,
		getMyList,
		getTakeTask
	} from '@/pages/api/orderp/orderp.js'
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		mixins: [mescrollMixins],
		props:['StreetId'],
		computed: {
			...mapState('enforce_law', ['infoItem']),
		},
		components: {
			mescrollList,
			orderCard,
			lauwenSelect
		},
		data() {
			return {
				mescrollUp: {
					auto: false,
					textNoMore: '-- 没有更多数据了 --'
				},
				mescrollDown: {
					auto: false,
					textNoMore: '-- 没有更多数据了 --'
				},
				pageSize_w: 10,
				isDelay: '工程渣土工单处置',
				options: {

					1: '工程渣土工单处置',

				},
				loading: false,
				orderList_: '',
				order_length: -1,
				refresherTriggered: false,
				_refresherTriggered: false,
				icon: 'https://www.mescroll.com/img/mescroll-empty.png',
				streetOrg:'GO_16eb92696ef4421295c605feea236393'
			}
		},
		created() {
			uni.$on('update_workorder', id => {
				this.orderList_.forEach(d => {
					if (d.recordId == id) {
						d.orderType = 0
					}
				})
			})
		},
		mounted() {
			
			this.loading = true
			this.getOrderList()

		},
		methods: {
			...mapMutations('enforce_law', ['setInfoItem']),
			// 自定义下拉刷新被触发
			refresherrefresh() {
				console.log("自定义下拉刷新被触发");
				let _this = this;
				if (_this._refresherTriggered) {
					return;
				}
				_this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true;
				}
				this.loadStoreData();
			},
			refresherrestore() {
				console.log("自定义下拉刷新被复位");
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			refresherabort() {
				console.log("自定义下拉刷新被中止	");
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			loadStoreData() {
				let _this = this;
				this.getOrderList();
				setTimeout(() => {
					_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
					_this._refresherTriggered = false;
				}, 1000)
			},
			upper(e) {
				this.refresherrefresh()
				console.log(e)
			},
			lower(e) {
				this.refresherrefresh()
				console.log(e)
			},
			//进入详情
			gotoDetail(item) {
				this.setInfoItem(item)
				// res.eventChannel.emit('getData', item)
				console.log('执法的列表详情', this.infoItem, item)
				uni.navigateTo({
					url: '/pages/index/listCard/workorderList/detailList',
				})
			},
			taketask(item) {
				this.orderList_ = []
				this.getOrderList()
			},
			//获取工单列表
			getOrderList() {
				let params = {
					// itemId: '402887ae7b4ac082017b52d8a4f51007,402887ae7e283327017edd9469e659fc,402887ae7efc316d017efc60582e0095', // 正式环境
					itemId: '402887ae7b4ac082017b52d8a4f51007', // 测试环境
					size: this.pageSize_w,
					// orgId:this.StreetId
				}
				return new Promise((resolve, reject) => {
					getMyList(params).then(res => {
						console.log('预警工单列表', res)
						this.orderList_ = res.rows
						this.order_length = res.rows.length
						resolve(res.rows)

					}).catch(err => {
						reject(err)
					}).finally(f => {
						this.loading = false
					})
				})

			},
			//筛选
			getValue(index) {
				console.log(this.options[index])
				this.isDelay = this.options[index]

				this.getOrderList()

			},
			downCallback() {
				// this.$emit('downCallback',this.mescroll)
				this.pageSize_w = 10
				this.getOrderList().then(res => {
					this.mescroll.endSuccess(res.length, res.length > this.order_length);
				})
			},
			upCallback() {
				// this.$emit('upCallback',this.mescroll)
				this.pageSize_w += 10;
				this.getOrderList().then(res => {
					this.mescroll.endSuccess(res.length, res.length > this.order_length);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.workorderlist-main {
		background-color: #FFFFFF;
		overflow: hidden;
		height: 80vh;
		padding-bottom: 20vh;

		.items-top {
			width: 750rpx;
			z-index: 999;

			.cell_item {
				margin-top: 2rpx;
				background-color: #FFFFFF;
				border-bottom: 1.5rpx solid #DBDBDB;
			}
		}

		.workorderlist {
			background-color: #FFFFFF;
			// height: 75vh;
			padding-bottom: 20rpx;
		}

		.items {
			margin-top: 26rpx;
			
		}

		.empty-icon {
			width: 580rpx;
			height: 580rpx;
		}
	}
</style>
